<template>
  <div class="common-bar" v-if="options">
    <div v-if="options.title" class="common-bar-title" :style="{ 'min-width': options.width + 'px' }">
      {{ options.title }}
    </div>
    <div class="common-bar-rows">
      <template v-for="(row, index) in rows">
        <div class="common-bar-row" :key="index">
          <div class="common-bar-items" v-if="row.items">
            <template v-for="(item, index) in row.items">
              <div class="common-bar-option" :key="index" v-if="item.type == 'text'">
                <span :style="{ 'min-width': item.labelWidth + 'px' }">{{ item.label }}</span>
                <el-input
                  :prefix-icon="item.icon"
                  v-model="item.value"
                  :placeholder="item.placeholder"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  clearable
                  :size="size"
                  @keyup.enter.native="$event.target.blur"
                  @blur="item.handleTextBlur(item.value, item.optionValue)"
                  @input="item.handleTextInput(item.value, item.optionValue)"
                  @clear="item.handleTextClear(item.value, item.optionValue)"
                >
                  <el-select
                    v-model="item.optionValue"
                    :placeholder="item.optionPlaceholder"
                    :style="{ width: item.optionWidth + 'px' }"
                    :disabled="options.isDisabled"
                    slot="prepend"
                    :size="size"
                    v-if="item.options"
                  >
                    <template v-for="(option, index) in item.options">
                      <el-option :key="index" :label="option.label" :value="option.value"></el-option>
                    </template>
                  </el-select>
                </el-input>
              </div>
              <div class="common-bar-option" :key="index" v-else-if="item.type == 'number'">
                <span :style="{ 'min-width': item.labelWidth + 'px' }">{{ item.label }}</span>
                <el-input-number
                  v-model="item.value"
                  :min="item.min"
                  :max="item.max"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  :size="size"
                  @keyup.enter.native="$event.target.blur"
                  @blur="item.handleNumberBlur(item.value)"
                ></el-input-number>
              </div>
              <div class="common-bar-option" :key="index" v-else-if="item.type == 'select'">
                <span :style="{ 'min-width': item.labelWidth + 'px' }">{{ item.label }}</span>
                <el-select
                  v-model="item.value"
                  :placeholder="item.placeholder"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  :size="size"
                  filterable
                  :clearable="options.clearble"
                  @change="item.handleSelectChange(item.value)"
                >
                  <template v-for="(option, index) in item.options">
                    <el-option :key="index" :label="option.label" :value="option.value"></el-option>
                  </template>
                </el-select>
              </div>
              <div class="common-bar-option" :key="index" v-else-if="item.type == 'cascader'">
                <span :style="{ 'min-width': item.labelWidth + 'px' }">{{ item.label }}</span>
                <el-cascader
                  v-model="item.value"
                  :options="item.options"
                  :placeholder="item.placeholder"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  clearable
                  expand-trigger="hover"
                  :size="size"
                  @change="item.handleCascaderChange(item.value)"
                ></el-cascader>
              </div>
              <div class="common-bar-option" :key="index" v-else-if="item.type == 'time'">
                <span :style="{ 'min-width': item.labelWidth + 'px' }">{{ item.label }}</span>
                <el-time-picker
                  v-model="item.value"
                  :placeholder="item.placeholder"
                  :range-separator="item.rangeSeparator"
                  :start-placeholder="item.startPlaceholder"
                  :end-placeholder="item.endPlaceholder"
                  :value-format="item.valueFormat"
                  :is-range="item.isRange"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  :size="size"
                  @keyup.enter.native="$event.target.blur"
                  @blur="item.handleTimeBlur(item.value)"
                ></el-time-picker>
              </div>
              <div class="common-bar-option" :key="index" v-else-if="item.type == 'date'">
                <span :style="{ 'min-width': item.labelWidth + 'px' }">{{ item.label }}</span>
                <el-date-picker
                  v-model="item.value"
                  :range-separator="item.rangeSeparator"
                  :start-placeholder="item.startPlaceholder"
                  :end-placeholder="item.endPlaceholder"
                  :value-format="item.valueFormat"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  :size="size"
                  type="daterange"
                  v-if="item.isRange"
                  @keyup.enter.native="$event.target.blur"
                  @blur="item.handleDateBlur(item.value)"
                  @change="item.handleDateChange(item.value)"
                ></el-date-picker>
                <el-date-picker
                  v-model="item.value"
                  :placeholder="item.placeholder"
                  :value-format="item.valueFormat"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  :size="size"
                  type="date"
                  v-else
                  @keyup.enter.native="$event.target.blur"
                  @blur="item.handleDateBlur(item.value)"
                  @change="item.handleDateChange(item.value)"
                ></el-date-picker>
              </div>
              <div class="common-bar-option" :key="index" v-else-if="item.type == 'month'">
                <span :style="{ 'min-width': item.labelWidth + 'px' }">{{ item.label }}</span>
                <el-date-picker
                  v-model="item.value"
                  :placeholder="item.placeholder"
                  :value-format="item.valueFormat"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  :size="size"
                  type="month"
                  @keyup.enter.native="$event.target.blur"
                  @blur="item.handleDateBlur(item.value)"
                ></el-date-picker>
              </div>
              <div class="common-bar-option" :key="index" v-else-if="item.type == 'datetime'">
                <span :style="{ 'min-width': item.labelWidth + 'px' }">{{ item.label }}</span>
                <el-date-picker
                  v-model="item.value"
                  :range-separator="item.rangeSeparator"
                  :start-placeholder="item.startPlaceholder"
                  :end-placeholder="item.endPlaceholder"
                  :value-format="item.valueFormat"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  :size="size"
                  type="datetimerange"
                  v-if="item.isRange"
                  @keyup.enter.native="$event.target.blur"
                  @blur="item.handleDateBlur(item.value)"
                ></el-date-picker>
                <el-date-picker
                  v-model="item.value"
                  :placeholder="item.placeholder"
                  :value-format="item.valueFormat"
                  :style="{ width: item.width + 'px' }"
                  :disabled="options.isDisabled"
                  :size="size"
                  type="datetime"
                  v-else
                  @keyup.enter.native="$event.target.blur"
                  @blur="item.handleDateBlur(item.value)"
                ></el-date-picker>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
    <div class="common-bar-buttons">
      <template v-for="(button, index) in buttons">
        <el-button
          :key="index"
          :type="button.type"
          :icon="button.icon"
          :title="button.title"
          :disabled="button.isDisabled"
          :size="size"
          v-if="button.isShow"
          @click.native="button.handleButtonClick()"
          >{{ button.label }}</el-button
        >
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonBar',
  props: {
    options: {
      type: Object,
      required: true
    },
    rows: {
      type: Array,
      default: () => []
    },
    buttons: {
      type: Array,
      default: () => []
    },
    size: {
      type: String,
      default: () => 'medium'
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped>
.common-bar {
  width: 100%;
  min-height: 41px;
  display: flex;
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 8px;
}
.common-bar-title {
  height: 28px;
  line-height: 28px;
  color: #606266;
  font-size: 14px;
  font-weight: 400;
  margin: 6.5px 10px;
}
.common-bar-rows {
  flex: 1;
  min-height: 34px;
  margin: 3.5px 0;
  display: flex;
  flex-direction: column;
}
.common-bar-row {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.common-bar-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.common-bar-option {
  margin: 3px 10px 3px 0;
  display: flex;
  align-items: center;
}
.common-bar-option span {
  min-width: 26px;
  height: 28px;
  line-height: 28px;
  color: #606266;
  font-size: 14px;
  font-weight: 400;
  /* margin-right: 10px; */
}
.common-bar-option .el-cascader {
  margin: 0;
}
.common-bar-buttons {
  height: 34px;
  margin: 3.5px 0;
}
.common-bar-buttons .el-button {
  float: right;
  margin: 3.5px 10px 3.5px 0;
}
</style>
